<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <title>信息管理系统</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link href="/style/basic_layout.css" rel="stylesheet" type="text/css">
    <link href="/style/common_style.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="/js/jquery/jquery.js"></script>
    <script type="text/javascript" src="/js/plugins/artDialog/jquery.artDialog.js"></script>
    <script type="text/javascript" src="/js/plugins/jquery-validate/jquery.validate.js"></script>
    <script type="text/javascript" src="/js/commonAll.js"></script>
    <script>
        $(function () {



             $("#selectAll").click(function () {
                 $("#all_roles option").appendTo($("#self_roles"));
             });

             $("#deselectAll").click(function () {

                 $("#self_roles option").appendTo($("#all_roles"))
             })

             $("#select").click(function () {
                 $("#all_roles option:selected").appendTo($("#self_roles"))
             })

             $("#deselect").click(function () {
                 $("#self_roles option:selected").appendTo($("#all_roles"))

             })

            //表单验证
            $("#editForm").validate({
                rules:{
                    name: {
                        required: true,
                        minlength: 4
                    },
                    password: {
                        required:true,
                        minlength:6

                    },
                    repassword:{
                        required:true,
                        equalTo:"#password"
                    }
                },
                messages:{
                    name: {
                        required:"用户名不能为空" ,
                        minlength:"用户名不能小于4位"
                    },
                    password:{
                        required:"密码不能为空",
                        minlength: "密码不能小于6位"

                    },
                    repassword:{
                        required:"密码不能为空",
                        equalTo:"两次输入的密码不一样"
                    }
                }
            });


                //将最右seleclet中所有optionshue设置为全部设置为选中
                $("#editForm").submit(function () {
                    $("#self_roles option").each(function (index,item) {
                        $(item).prop("selected",true)
                    });
                });


//            moveAll("selectAll" ,"all_roles","self_roles")
//            moveAll("deselectAll" ,"self_roles","all_roles")
//
//            move("select" ,"all_roles","self_roles")
//            move("deselect" ,"self_roles","all_roles")all_roles
        });


    </script>
</head>
<body>
<form name="editForm" action="/employee/saveorupdate.do" method="post" id="editForm">
    <input type="hidden" value="${employee.id}" name="id">
    <div id="container">
        <div id="nav_links">
            <span style="color: #1A5CC6;">用户编辑</span>
            <div id="page_close">
                <a>
                    <img src="/images/common/page_close.png" width="20" height="20" style="vertical-align: text-top;"/>
                </a>
            </div>
        </div>
        <div class="ui_content">
            <table cellspacing="0" cellpadding="0" width="100%" align="left" border="0">
                <tr>
                    <td class="ui_text_rt" width="140">姓名</td>
                    <td class="ui_text_lt">
                        <input name="name" class="ui_input_txt02" value="${employee.name}"/>
                    </td>
                </tr>
                <tr>
                    <td class="ui_text_rt" width="140">密码</td>
                    <td class="ui_text_lt">
                        <input type="password" name="password" id="password" class="ui_input_txt02"/>
                    </td>
                </tr>
                <tr>
                    <td class="ui_text_rt" width="140">验证密码</td>
                    <td class="ui_text_lt">
                        <input name="" type="password" class="ui_input_txt02" />
                    </td>
                </tr>
                <tr>
                    <td class="ui_text_rt" width="140">Email</td>
                    <td class="ui_text_lt">
                        <input name="email" class="ui_input_txt02" value="${employee.email}"/>
                    </td>
                </tr>
                <tr>
                    <td class="ui_text_rt" width="140">年龄</td>
                    <td class="ui_text_lt">
                        <input name="age" class="ui_input_txt02" value="${employee.age}"/>
                    </td>
                </tr>
                <tr>
                    <td class="ui_text_rt" width="140">所属部门</td>
                    <td class="ui_text_lt">
                        <select name="dept.id" class="ui_select01">
                        <c:forEach items="${departments}" var="c">
                            <option value="${c.id}" ${c.id == employee.dept.id ? 'selected' : ''}>${c.name}</option>
                        </c:forEach>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td class="ui_text_rt" width="140">超级管理员</td>
                    <td class="ui_text_lt">
                        <input type="checkbox" name="admin" class="ui_checkbox01"></input>
                    </td>
                </tr>
                <tr>
                    <td class="ui_text_rt" width="140">角色</td>
                    <td class="ui_text_lt">
                        <table>
                            <tr>
                                <td>
                                    <select multiple="true" class="ui_multiselect01" id="all_roles">
                                        <c:forEach items="${role}" var="item">
                                            <option value="${item.id}">${item.name}</option>
                                        </c:forEach>
                                    </select>
                                </td>
                                <td align="center">
                                    <input type="button" id="select" value="-->" class="left2right"/><br/>
                                    <input type="button" id="selectAll" value="==>" class="left2right"/><br/>
                                    <input type="button" id="deselect" value="<--" class="left2right"/><br/>
                                    <input type="button" id="deselectAll" value="<==" class="left2right"/>
                                </td>
                                <td>
                                    <select multiple="true" name="ids" class="ui_multiselect01" id="self_roles">
                                        <c:forEach items="${employee.roles}" var="item">
                                            <option value="${item.id}">${item.name}</option>
                                        </c:forEach>
                                    </select>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td class="ui_text_lt">
                        &nbsp;<input type="submit" value="确定保存" class="ui_input_btn01"/>
                        &nbsp;<input id="cancelbutton" type="button" value="重置" class="ui_input_btn01"/>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</form>
</body>
</html>
